<template>
    <view class="containerForm">
        <form @submit="submitForm" @reset="resetForm">
            <view class="form-item column">
                <view class="upload">
                    <text class="up">上传产品图片或视频</text>
                    <van-uploader style="margin-top: 20rpx;" preview-size="110px" upload-text="添加图片或视频"
                        :file-list="fileList" @after-read="afterRead" max-count="1" @delete="deleteImg" />
                </view>
                <view class="form-item-title">产品名称</view>
                <view>
                    <input class="uni-input" name="name" type="text" v-model="form.name" placeholder="请输入产品名称"
                        confirm-type="next" placeholder-style="color: #F5F5F5;" />
                </view>
                <view class="form-item-title">数量</view>
                <view>
                    <input class="uni-input" name="quantity" v-model="form.quantity" type="number"
                        placeholder-style="color: #F5F5F5;" placeholder="请输入数量" confirm-type="next" />
                </view>
                <view class="form-item-title">联系人</view>
                <view>
                    <input class="uni-input" name="contact_person" v-model="form.contact_person"
                        placeholder-style="color: #F5F5F5;" placeholder="请输入联系人" confirm-type="next" />
                </view>
                <view class="form-item-title">联系电话</view>
                <view>
                    <input class="uni-input" name="phone" v-model="form.mobile" placeholder-style="color: #F5F5F5;"
                        placeholder="请输入联系电话" type="number" />
                </view>
                <view class="form-item-title">价格</view>
                <view>
                    <input class="uni-input" name="price" v-model="form.price" type="number"
                        placeholder-style="color: #F5F5F5;" placeholder="请输入价格" confirm-type="next" />
                </view>
            </view>
            <button form-type="submit" class="uni-buttons">提交</button>
        </form>

    </view>

</template>

<script>
import { uploadFile, purchasingAdd } from '@/api/api'

export default {
    data() {
        return {
            form: {
                name: '',
                quantity: '',
                contact_person: '',
                mobile: '',
                price: '',
                attachfiles: ''
            },
            fileList: []
        }
    },
    onLoad(options) {
        let token = uni.getStorageSync('token')
        if (!token) {
            uni.showModal({
                title: '提示',
                content: '你还没登录，是否去登录？',
                success: (res) => {
                    if (res.confirm) {
                        uni.switchTab({ url: '/pages/user/user' })
                        console.log('用户点击确定');
                    } else if (res.cancel) {
                        console.log('用户点击取消');
                    }
                }
            });
        }
    },
    methods: {
        submitForm(e) {
            let form = e.detail.value;
            console.log(form)
            for (let key in form) {
                if (form[key] == '') {
                    uni.showToast({
                        title: '请填写所有必填项',
                        icon: 'none'
                    })
                }
            }
            form['attachfiles'] = this.form.attachfiles

            purchasingAdd(form).then(res => {
                if (res.code == 1) {
                    uni.showToast({
                        title: '提交成功',
                        icon: 'none'
                    })
                    setTimeout(() => {
                        uni.navigateBack()
                    }, 500)
                } else {
                    uni.showToast({
                        title: res.msg,
                        icon: 'none'
                    })
                }
            })
        },
        resetForm(e) {
            console.log(e)
        },
        afterRead(event) {
            const { file } = event.detail;
            uploadFile(file.url).then(res => {
                if (res.code == 1) {
                    this.fileList.push({
                        url: res.data.fullurl,
                    })
                    this.form.attachfiles = res.data.url;

                } else {
                    uni.showToast({
                        title: res.msg,
                        icon: 'none'
                    })
                }
            })
        },
        // 删除图片
        deleteImg(e) {
            let index = e.detail.index;
            this.fileList.splice(index, 1)
            this.form.attachfiles = ''
        },
    },
}
</script>
<style lang="scss">
page {
    background-color: #ffffff;
}

.upload {
    display: flex;
    flex-direction: column;

    .van-uploader ::v-deep .van-uploader__upload {
        background-color: #DDDDDD;
        width: 710rpx !important;
        border-radius: 12rpx;

        // .van-icon{
        // 	background: #000;
        // }
        .van-uploader__upload-icon {
            color: #bbb;
        }
    }

    text.up {
        font-size: 30rpx;
        line-height: 30rpx;
        color: #333333;
    }
}

.containerForm {
    padding: 30upx 20upx;
    position: relative;
    height: 100vh;
}

.form-item-title {
    color: #333333;
    font-size: 30upx;
    margin-bottom: 20upx;
    margin-top: 30upx;
}

.uni-input {
    background-color: #F5F5F5;
    border-radius: 12upx;
    padding: 18upx;
    font-size: 26upx;
    margin-bottom: 20upx;
}

.textaresa {
    width: auto;
    height: 300upx;
}

.uni-buttons {
    position: absolute;
    bottom: 180upx;
    left: 0;
    right: 0;
    background-color: #359BEF;
    color: #ffffff;
    border-radius: 40px;
    margin: 0 30upx;
    font-size: 30upx;
}
</style>